<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>制度管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="../../../js/vue.js"></script>
    <script type="text/javascript" src="../../../js/jquery-2.1.4.js"></script>
    <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<!--头部工具条-->
<script type="text/html" id="headbar">
    <div class="layui-btn-container"  >
        <!--使用表达式让按钮动态显示，if条件为true则显示，false不显示-->
        {{#  if(insert){ }}
        <button type="button" class="layui-btn" lay-event="insert">
            <i class="layui-icon">&#xe654;</i> 新增
        </button>
        {{#  } }}
        {{#  if(del){ }}
        <button class="layui-btn layui-btn-danger" lay-event="getCheckData">
            <i class="layui-icon">&#xe640;</i> 批量删除
        </button>
        {{#  } }}
    </div>
</script>
<!-- 每一行工具条 -->
<script type="text/html" id="barDemo">
    {{#  if(update){ }}
    <button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-warm" lay-event="singleUpdate">
        <i class="layui-icon">&#xe642;</i> 修改
    </button>
    {{#  } }}

    {{#  if(del){ }}
    <button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger" lay-event="singleDel">
        <i class="layui-icon">&#xe640;</i> 删除
    </button>
    {{#  } }}
</script>


<!-----------------------------------------表格内容--------------------------------------------->
<div id="content">
    <table class="layui-table"
           lay-data="{url:'/houtai/user/getVips',page:true,limit:10,limits:[10,20,10000],toolbar:'#headbar',
                     height:'full-100',totalRow:true,loading:true,title:'会员等级制度表',
                     //把返回的数据result转为换layUI需要的格式，此处返回的是mybatisPlus的IPage对象，具体返回值自己设定
                     parseData: function(res){ //res 即为原始返回的数据
                        console.log(res);
                        return {
                            'code': res.code, //解析接口状态
                            'msg': res.message, //解析提示文本
                            'count': res.obj.totalSize, //解析数据长度
                            'data': res.li //解析数据列表
                          };
                       },
                //给表格设置一个ID
               id:'test'}"
           lay-filter="filter">
        <thead>
        <tr>
            <th lay-data="{checkbox:true}"></th><!--开起全选框-->
            <th lay-data="{field:'lvId', sort: true,hide:true}">制度ID</th><!--field：实体类属性，sort：排序-->
            <th lay-data="{field:'level'}">等级</th>
            <th lay-data="{field:'lvName'}">等级名称</th>
            <th lay-data="{field:'lvPoints'}">所需积分</th>
            <th lay-data="{field:'discount'}">折扣</th>
            <th lay-data="{field:'vipDesc'}">描述</th>
            <th v-if="isShow" lay-data="{field:'opeartion', toolbar: '#barDemo',width : 170}">操作</th>

        </tr>
        </thead>
    </table>
</div>

<!-----------这里是修改弹出层的表单信息,表单的id用于表单的选择，style是在本页隐藏，只有点击编辑才会弹出---------->
<div class="layui-row" id="popUpdateUser" style="display:none;">
    <form class="layui-form" id="updateForm" lay-filter="updateFormFilter">
        <input name="lvId" id="updateLvId" hidden>
        <div class="layui-form-item" style="width: 350px;margin-top: 10px;margin-left: 30px">
            <label class="layui-form-label">等级</label>
            <div class="layui-input-block">
                <input type="number" min="1" max="10" name="level" id="updateLevel" required  lay-verify="required" placeholder="请输入等级,请勿与其他等级相同" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="width: 350px;margin-top: 10px;margin-left: 30px">
            <label class="layui-form-label">等级名</label>
            <div class="layui-input-block">
                <input type="text" name="lvName" id="updateName" required  lay-verify="required" placeholder="请输入等级名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="width: 350px;margin-top: 10px;margin-left: 30px">
            <label class="layui-form-label">所需积分</label>
            <div class="layui-input-block">
                <input type="text" name="lvPoints" id="updateLvPoints" required  lay-verify="required" placeholder="请输入所需积分" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="width: 350px;margin-top: 10px;margin-left: 30px">
            <label class="layui-form-label">等级折扣</label>
            <div class="layui-input-block">
                <input type="text" name="discount" id="updateDiscount" required  lay-verify="required" placeholder="请输入折扣" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="width: 350px;margin-top: 10px;margin-left: 30px">
            <label class="layui-form-label">等级描述</label>
            <div class="layui-input-block">
                <input type="text" name="vipDesc" id="updateVipDesc" required  lay-verify="required" placeholder="请输入等级描述" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: 50px">
            <div class="layui-input-block">
                <input type="button" class="layui-btn" lay-submit lay-filter="updateSubmit" value="立即提交">
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<!--新增的弹出层-->
<div class="layui-row" id="popInsertUser" style="display:none;">
    <form class="layui-form" id="insertForm" lay-filter="insertFormFilter">
    <input name="lvId" id="insertLvId" hidden>
    <div class="layui-form-item" style="width: 350px;margin-top: 10px;margin-left: 30px">
        <label class="layui-form-label">等级</label>
        <div class="layui-input-block">
            <input type="number" min="1" max="10" name="level" id="insertLevel" required  lay-verify="required" placeholder="请输入等级,请勿与其他等级相同" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" style="width: 350px;margin-top: 10px;margin-left: 30px">
        <label class="layui-form-label">等级名</label>
        <div class="layui-input-block">
            <input type="text" name="lvName" id="insertName" required  lay-verify="required" placeholder="请输入等级名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" style="width: 350px;margin-top: 10px;margin-left: 30px">
        <label class="layui-form-label">所需积分</label>
        <div class="layui-input-block">
            <input type="text" name="lvPoints" id="insertLvPoints" required  lay-verify="required" placeholder="请输入所需积分" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" style="width: 350px;margin-top: 10px;margin-left: 30px">
        <label class="layui-form-label">等级折扣</label>
        <div class="layui-input-block">
            <input type="text" name="discount" id="insertDiscount" required  lay-verify="required" placeholder="请输入折扣" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" style="width: 350px;margin-top: 10px;margin-left: 30px">
        <label class="layui-form-label">等级描述</label>
        <div class="layui-input-block">
            <input type="text" name="vipDesc" id="insertVipDesc" required  lay-verify="required" placeholder="请输入等级描述" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" style="margin-top: 50px">
        <div class="layui-input-block">
            <input type="button" class="layui-btn" lay-submit lay-filter="insertSubmit" value="立即提交">
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    </form>
</div>


<script src="../../../layuiadmin/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->


<script>
    var insert = false;
    var del= false;
    var update= false;
    var isShow=false;

    //利用Vue判断是否具备每一行的删除或者修改权限
    var vue = new Vue({
        el:"#content",
        data:{
            user:"",
            buttons:[],
            franchiseesId:[],
            franchisees:{}
        },
        created:function(){

            $.ajax({
                url : "/houtai/page/user/vip/list",
                type : "get",
                dataType : "json",
                success : function(data) {
                    if(data.message=="success"){

                    }else if(data.message == "premissionException"){
                        location.href = "/houtai/page/exception/NoPremission.html";
                    }else{
                        location.href = "/houtai/page/exception/500.html";
                    }
                }
            });

        },

        methods: {

        },
        computed:{
            isShow:function () {
                var _this = this;
                var delbtn=false;
                var updatebtn=false;
                //获取当前网页地址
                var url = location.pathname;
                $.ajax({
                    url: "/houtai/adminuser/buttons",
                    type: "get",
                    async: false,
                    data: {
                        url: url
                    },
                    dataType: "json",
                    success: function (data) {
                        console.log(data);
                        _this.buttons = data.li;
                        for(var i=0;i<_this.buttons.length;i++){
                            if(_this.buttons[i].menuUrl.indexOf("insert")!=-1){
                                insert = true;
                                break;
                            }
                        }
                        for(var i=0;i<_this.buttons.length;i++){
                            if(_this.buttons[i].menuUrl.indexOf("delete")!=-1){
                                del = true;
                                isShow = true;
                                delbtn = true;
                                break;
                            }
                        }
                        for(var i=0;i<_this.buttons.length;i++){
                            if(_this.buttons[i].menuUrl.indexOf("update")!=-1){
                                update = true;
                                isShow = true;
                                updatebtn =  true;
                                break;
                            }
                        }

                    }
                });


                if(delbtn||updatebtn){
                    return true;
                }else{
                    return false;
                }

            }
        }

    })

    layui.use(['table','jquery','laypage','layer','form'], function(){
        var table = layui.table;
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;

        //监听顶部工具栏事件
        table.on('toolbar(filter)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data;
            switch(obj.event){
                case 'insert':
                    layer.open({
                        //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                        type: 1,
                        title: "新增会员等级制度信息",
                        area: ['450px', '400px'],//设置弹出层尺寸

                        content: $("#popInsertUser")//引用的弹出层的页面层的方式加载修改界面表单
                    });
                    break;
                //点击批量删除执行以下代码
                case 'getCheckData':
                    if(data.length < 1){
                        layer.msg("至少选择一行哦!!!");
                    }else{
                        layer.confirm('真的删除行么', function(index){
                            layer.close(index);

                            var lvIds = new Array();
                            for(var i = 0;i < data.length;i++){
                                lvIds.push(data[i].lvId);
                            }

                            $.ajax({
                                url:"/houtai/page/user/vip/delete",
                                data:{lvIds:lvIds},
                                type:"post",
                                dataType:"json",
                                success:function (data) {
                                    if(data.message == "success"){
                                        layer.msg("删除成功",{icon: 6});
                                        //重载表格
                                        $(".layui-laypage-btn").click();
                                    }else if(data.message == "premissionException"){
                                        location.href = "/houtai/page/exception/NoPremission.html";
                                    }else if(data.message == "serverException"){
                                        location.href = "/houtai/page/exception/500.html";
                                    }else{
                                        layer.msg("删除失败", {icon: 5});
                                    }
                                }
                            })
                        });

                    };
                    break;
            }

        });
        var index = null;
        //监听每一行工具条
        table.on('tool(filter)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据

            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if(layEvent === 'detail'){//查看
                //do somehing
            } else if(layEvent === 'singleDel'){ //删除
                layer.confirm('真的删除行么', function(index){
                    layer.close(index);
                    var lvIds = new Array();
                    lvIds.push(data.lvId);
                    //向服务端发送删除指令
                    $.ajax({
                        url:"/houtai/page/user/vip/delete",
                        data:{lvIds: lvIds},
                        type:"post",
                        dataType:"json",
                        success:function (data) {
                            if(data.message == "success"){
                                layer.msg("删除成功",{icon: 6});
                                //重载表格
                                $(".layui-laypage-btn").click();
                            }else if(data.message == "premissionException"){
                                location.href = "/houtai/page/exception/NoPremission.html";
                            }else if(data.message == "serverException"){
                                location.href = "/houtai/page/exception/500.html";
                            }else{
                                layer.msg("删除失败", {icon: 5});
                            }
                        }
                    })
                });
            } else if(layEvent === 'singleUpdate'){ //编辑
                form.val('updateFormFilter', {
                    "lvId": data.lvId // "name": "value"
                    ,"lvName": data.lvName
                    ,"lvPoints":data.lvPoints
                    ,"discount":data.discount
                    ,"level":data.level
                    ,"vipDesc":data.vipDesc
                });

                //开起弹出层
                index = layer.open({
                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    type: 1,
                    title: "修改会员制度信息",
                    area: ['450px', '400px'],//设置弹出层尺寸

                    content: $("#popUpdateUser")//引用的弹出层的页面层的方式加载修改界面表单
                });
                // 获取表单区域所有值
                var data1 = form.val("updateForm");
            }
        });
        //监听表单提交，上述的submit()中的值为事件过滤器的值
        form.on('submit(updateSubmit)', function(data){

            $.ajax({
                url:"/houtai/page/user/vip/update",
                data:data.field,
                type:"post",
                dataType:"json",
                success:function (data) {
                    if(data.message == "success"){
                        layer.msg("更新成功",{icon: 6});
                        //重载表格
                        $(".layui-laypage-btn").click();
                    }else if(data.message == "premissionException"){
                        location.href = "/houtai/page/exception/NoPremission.html";
                    }else if(data.message == "serverException"){
                        location.href = "/houtai/page/exception/500.html";
                    }else{
                        layer.msg("更新失败", {icon: 5});
                    }
                }
            });

            layer.close(index);
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        //监听修改框提交
        form.on('submit(insertSubmit)', function(data){
            $.ajax({
                url:"/houtai/page/user/vip/insert",
                data:data.field,
                type:"post",
                dataType:"json",
                success:function (data) {
                    if(data.message == "success"){
                        layer.msg("新增成功",{icon: 6});
                        //重载表格
                        $(".layui-laypage-btn").click();
                        window.location.reload();
                    }else if(data.message == "premissionException"){
                        location.href = "/houtai/page/exception/NoPremission.html";
                    }else if(data.message == "serverException"){
                        location.href = "/houtai/page/exception/500.html";
                    }else{
                        layer.msg("新增失败", {icon: 5});
                    }
                }
            });

            //刷新表单
            form.render();
            layer.closeAll();
            return false;
        });

    });

</script>

</body>
</html>